<template>
	<view class="mine-top" :style="{
		padding: `${bottom + 12}px 26px 26px`
	}">
		<view class="avatar-box">
			<image src="@/static/logo.png" class="mine-avatar"></image>
			<view class="up-m-t-40 f-s-20 f-w-b">{{ userInfo.nickName }}</view>
		</view>


		<view class="mine-head" @click="set">
			<view class="menu-item bottom-line">
				<image src="@/static/set.png" style="width: 26px;height: 26px;"></image>
				<view class="menu-right">
					<view class="f-s-14 f-w-b">个人设置</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>

		<view class="mine-head u-m-t-30" @click="auth">
			<view class="menu-item bottom-line">
				<image src="@/static/auth.png" style="width: 26px;height: 26px;"></image>
				<view class="menu-right">
					<view class="f-s-14 f-w-b">实名认证</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>

		<button open-type="contact" hover-class="none">
			<view class="mine-head u-m-t-30">
				<view class="menu-item bottom-line">
					<image src="@/static/kf.png" style="width: 26px;height: 26px;"></image>
					<view class="menu-right">
						<view class="f-s-14 f-w-b">在线客服</view>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
		</button>

		<view class="mine-head u-m-t-30" @click="show = true">
			<view class="text-center f-s-14 f-w-b error-color">退出登录</view>
		</view>

		<up-modal :show="show" title="确认退出登录" width="280px" content="退出登录不会丢失任何数据,您仍可以登录此帐号" showCancelButton
			confirmText="退出登录" confirmColor="#F53F3F" cancelColor="#165DFF" @confirm="confirm" ref="uModal"
			:asyncClose="true" @cancel="show = false">
		</up-modal>
	</view>
</template>

<script setup>
	import Func from '@/utils/common.js'
	import LoginApi from '@/api/login.js'
	import {
		ref
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/user'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const userStore = useUserStore()
	const userInfo = ref({})
	const show = ref(false)


	onShow(() => {
		userStore.getUserInfo().then(user => {
			userInfo.value = user
		})
	})

	const set = () => {
		uni.navigateTo({
			url: '/subPackages/mine/edit'
		})
	}

	const auth = () => {
		Func.toast('功能开发中，敬请期待！')
	}


	const confirm = () => {
		show.value = false
		userStore.logout().then(() => {
			Func.toast('退出成功')
			uni.$u.sleep(600).then(() => {
				uni.reLaunch({
					url: '/pages/index'
				})
			})
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #FDFDFF !important;
		background-image: url(https://byjh.oss-cn-hangzhou.aliyuncs.com/9ed9618eb40b4f8db2eb9f79c9eb0b2a.jpg);
		background-size: 100vw auto;
		background-repeat: no-repeat;
	}

	.mine-top {
		.avatar-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 30px;
		}

		.mine-avatar {
			width: 120px;
			height: 120px;
			border-radius: 120px;
			border: 2px solid #ffffff;
		}
	}

	.mine-head {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px 20px;
		width: 100%;
		box-sizing: border-box;

		// 加上边框阴影
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.02);

		.menu-item {
			display: flex;
			align-items: center;

			.menu-right {
				display: flex;
				flex: 1;
				justify-content: space-between;
				margin-left: 12px;
			}

			.bottom-line {
				border-bottom: 1px solid red;
			}
		}

	}

	button {
		background-color: transparent;
		padding-left: unset !important;
		padding-right: unset !important;
		border: none !important;
		outline: none;

		&:after {
			border: none !important;
		}
	}

	::v-deep .u-modal__title {
		font-size: 18px !important;
		color: #000 !important;
	}

	::v-deep .u-modal__content__text {
		color: #999999 !important;
		text-align: center !important;
	}
</style>